<template>
  <div class="user-mail-outer-outer">
    <div class="user-mail-outer">
      <div class="user-mail-title-outer">
        Manage Your Email
      </div>
      <div class="user-mail-description-outer">
        Your email can be used for login, password retrieval, email alerts for changes in order status, etc.
      </div>
      <div class="user-mail-item-outer-outer">
        <table style="width: 100%">
          <tbody>
          <tr>
            <td>
              <div class="user-mail-item-outer" style="text-align: right">
                Your Email:
              </div>
            </td>
            <td>
              <div class="user-mail-item-outer">
                {{ mail }}
              </div>
            </td>
          </tr>
          <tr v-if="state.edit">
            <td></td>
            <td>
              <basic-button @click="toSendUnbindCode">
                Send Old Mail Code
              </basic-button>
            </td>
          </tr>
          <tr v-if="state.edit">
            <td>
              <div class="user-mail-item-outer" style="text-align: right">
                Old Mail Code:
              </div>
            </td>
            <td>
              <div class="user-mail-item-outer">
                <basic-input  type="number" v-model="state.unBindCode" size="small" class="user-mail-item-input"></basic-input>
              </div>
            </td>
          </tr>
          <tr v-if="state.edit">
            <td>
              <div class="user-mail-item-outer" style="text-align: right">
                New Mail:
              </div>
            </td>
            <td>
              <div class="user-mail-item-outer">
                <basic-input v-model="state.newMail" size="small" class="user-mail-item-input"></basic-input>
              </div>
            </td>
          </tr>
          <tr v-if="state.edit&&state.newMail.length>0">
            <td></td>
            <td>
              <basic-button @click="toSendBindCode">
                Send New Mail Code
              </basic-button>
            </td>
          </tr>
          <tr v-if="state.edit">
            <td>
              <div class="user-mail-item-outer" style="text-align: right;">
                New Mail Code:
              </div>
            </td>
            <td>
              <div class="user-mail-item-outer">
                <basic-input type="number" v-model="state.bindCode" size="small" class="user-mail-item-input"></basic-input>
              </div>
            </td>
          </tr>
          <tr >
            <td>
              <div class="user-mail-item-outer" style="text-align: right;padding-top: 10px;">
                Action:
              </div>
            </td>
            <td>
              <div class="user-mail-item-outer" style="padding-top: 10px;">
                <basic-button v-if="!state.edit" inverseColor="true" class="user-mail-item-button" @click="changeEditState">
                  Edit
                </basic-button>
                <basic-button v-if="state.edit" inverseColor="true" class="user-mail-item-button" @click="toSubmit">
                  Submit
                </basic-button>
                <basic-button v-if="state.edit" class="user-mail-item-button" @click="changeEditState">
                  Cancel
                </basic-button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>



      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import BasicInput from "../../components/input/basicInput.vue";
import BasicButton from "../../components/button/basicButton.vue";
import {changeBindMail, getUserInfo, sendBindMail, sendUnbindMail} from '../../api/UserActionRequest';
import { message } from 'ant-design-vue';
import {searchCart} from "../../api/CartRequest";


export default defineComponent({
  components: {BasicButton, BasicInput},
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      edit: false,
      bindCode: '',
      newMail: '',
      unBindCode: '',

    })

    const mail = computed(() => {
      if (store.state.globalInfo.userInfo != null && store.state.globalInfo.userInfo.mail != null)
        return store.state.globalInfo.userInfo.mail
      else return ''
    })

    const changeEditState = () => {
      state.edit = !state.edit
      state.bindCode = ''
      state.newMail = ''
      state.unBindCode = ''
    }

    const toSendUnbindCode=()=>{
      sendUnbindMail().then(()=>{
        message.success('Sent successfully')
      });
    }
    const toSendBindCode=()=>{
      if(state.newMail.trim().length>0)sendBindMail(state.newMail.trim()).then(()=>{
        message.success('Sent Successfully')
      }).catch((res)=>{
        message.error(res.data.message)
      });
      else message.error('Please Input New Mail')
    }

    const toSubmit=async ()=>{
      let ok=false;
      await changeBindMail(state.bindCode,state.newMail,state.unBindCode).then(async (res)=>{
        message.success('Sent Successfully');
        ok=true;
      }).catch((res)=>{
        message.error(res.data.message)
      });
      await getUserInfo().then((res)=>{
        store.commit('SET_GLOBAL_INFO',{
          userInfo:res.data.result
        })

      })
      if(ok){
        changeEditState()
      }

    }

    return {
      mail,
      toSubmit,
      changeEditState,
      toSendUnbindCode,
      toSendBindCode,
      state
    }
  }
})
</script>

<style scoped lang="less">
.user-mail-outer-outer {
  padding: 20px;
  @media screen and(max-width: 768px) {
    padding: 15px;
  }
  @media screen and(max-width: 576px) {
    padding: 10px;
  }
  @media screen and(max-width: 425px) {
    padding: 0;
  }

  .user-mail-outer {
    background-color: #f5f5f5;
    border-radius: 16px;
    padding: 20px 40px;

    @media screen and(max-width: 768px) {
      padding: 15px;
    }

    @media screen and(max-width: 425px) {
      padding: 10px;
      border-radius: 0;
    }
    @media screen and(max-width: 325px) {
      padding: 5px;
      border-radius: 0;
    }

    .user-mail-title-outer {
      line-height: 2;
      font-weight: bold;
      font-size: 30px;
      @media screen and(max-width: 768px) {
        font-size: 25px;
      }
    }

    .user-mail-description-outer {
      word-break: break-word;
      line-height: 1.5;
      @media screen and(max-width: 576px) {
        font-size: 14px;
      }
      margin-bottom: 30px;
    }

    .user-mail-item-outer-outer {
      .user-mail-item-outer {
        margin-bottom: 10px;
        white-space: nowrap;
        font-size: 15px;
        .user-mail-item-button{
          width: 100px;
          max-width: 60%;
          text-align: center;
        }
        .user-mail-item-input{
          width:90%;
          max-width: 250px;
        }
      }

      .user-mail-item-outer:last-child {
        margin-bottom: 0;

      }
    }
  }
}
</style>
